
<!-- Panel Header -->
<div class="panel-heading d-flex justify-content-between align-items-center">
    <div>
        <h6 id="p-header" class="panel-title" style="cursor: default">
            {{ panel.title || title }}
        </h6>
    </div>

    <div class="d-flex align-items-center" style="gap: 15px;">
        <ng-container *ngIf="showWhatIfSection()">
            <label class="panel-title">What if:</label>
            <div *ngFor="let column of getWhatIfColumns()">
                <span style="font-weight: bold;">{{column.display_name.default}}</span>
                <input type="number" pInputText [(ngModel)]="column.whatif.value"
                    (keydown.enter)="runWhatIfQuery(column)"
                    style="margin-left: 5px; width: 50px; padding: 0;">
                <button type="button" pButton pRipple icon="pi pi-refresh" class="p-button-outlined" style="width: 20px; padding: 0; border: 0;" (click)="runWhatIfQuery(column)"></button>
            </div>
        </ng-container>


        <div id="edit" [ngClass]="{'edit-blink': lodash.isEmpty(panel.content) }" style="width: 25px;">
            <i class="fa fa-ellipsis-v btn" (click)="contextMenu.showContextMenu($event)"></i>
        </div>
    </div>
</div>

<!-- Body of Panel -->
<div class="panel-body" [ngClass]="{'spinner-panel': display_v.minispinner}">
    <div *ngIf="display_v.saved_panel && !display_v.minispinner" class="p-1" style="height: 100%">
        <panel-chart #PanelChartComponent
            [props]="panelChartConfig"
            (configUpdated)="setChartProperties()"
            (onChartClick)="onChartClick($event)"            
            class="component" style="height: 100%; width: 100%; display:block">
        </panel-chart>
    </div>

    <div class="grid" *ngIf="display_v.minispinner">
        <div class="col-12">
            <p-progressSpinner [style]="{width: '5vw', height: '5vh'}" strokeWidth="8" class="" fill="#EEEEEE" animationDuration=".5s">
            </p-progressSpinner>
        </div>
    </div>
</div>

<!-- Page Dialog -->
<eda-page-dialog  #pdialog [inject]="{display: this.display_v.page_dialog, title:  this.panel.title.trim().length  > 0  ? panel.title : '\uD83D\uDD89'  }">
    <div (window:resize)="onResize($event)" class="grid">

        <div id="queryModelSelector" class="col-12">
            <p-dropdown  class="float-right" [(ngModel)]="selectedQueryMode" [options]="queryModes" (ngModelChange)="changeQueryMode()">
            </p-dropdown >
        </div>

        <p-tabView [activeIndex]="index" (onChange)="handleTabChange($event)" class="col-12 ">

            <p-tabPanel i18n-header="@@vistaSeleccionador" header="{{ selectedQueryMode != 'SQL' ? editQuery : editSQLQuery}}">

                <div class="grid">
                    <!-- SQL MODE -->
                    <ng-container *ngIf="selectedQueryMode=='SQL'">
                        <div class="col-7">
                            <h6 i18n="@@sqlExpresionH6">Expresión SQL</h6>
                            <hr>
                            <textarea id="query-area" class="sqlInput" rows="12" cols="100" pInputTextarea autoResize="autoResize" [(ngModel)]="currentSQLQuery">
                            </textarea>
                            <div class="col-6">
                                <h6 i18n="@@originTable">Tabla origen</h6>
                                <hr>
                                <p-dropdown [options]="sqlOriginTables" filter="true" optionLabel="label"
                                    [(ngModel)]="sqlOriginTable" [style]="{'width': '100%'}"
                                    i18n-placeholder="@@placeholderTables" placeholder="Tablas">
                                </p-dropdown>
                            </div>

                        </div>
                        <div id="help-menu" class="col-5">

                            <h6 i18n="@@indicaciones">Indicaciones</h6>
                            <hr>
                            <p-accordion *ngIf="this.display_v.page_dialog" id="help-text" (onOpen)="accopen($event)"
                                (onClose)="accopen($event)">
                                <p-accordionTab i18n-header="@@informacionGeneral" header="Información general">
                                    <ng-template pTemplate="content">
                                        <p i18n="@@indicaciones1"> Puedes realizar consultas SQL sobre el esquema definido
                                            en tu modelo.
                                            Para ello introduce la consulta en el cuadro de texto y selecciona la tabla
                                            principal
                                            (puede ser cualquiera de las que aparecen en la consulta).
                                            Usaremos esta tabla para vincular la consulta a los filtros del informe. </p>
                                        <p i18n="@@indicaciones2"> Limitaciones: </p>

                                        <ul>
                                            <li i18n="@@indicaciones3">
                                                Solo es posible usar las tablas del esquema definido en el modelo (si lo
                                                hay)
                                            </li>
                                            <li i18n="@@indicaciones4">
                                                Debes utilizar alias para todas las tablas de la consulta ( select a,b from
                                                tabla t where c )
                                            </li>
                                        </ul>
                                    </ng-template>
                                </p-accordionTab>
                                <p-accordionTab i18n-header="@@linkFilters"
                                    header="Vincular consulta con los filtros del panel">
                                    <ng-template pTemplate="content">
                                        <p i18n="@@indicaciones5"> Puedes vincular los filtros del informe con la consulta
                                        </p>
                                        <ul>
                                            <li i18n="@@indicaciones6">
                                                Para hacerlo sólo tienes que añadir:
                                                <span style="color:rgb(0, 62, 119); font-weight: bold"> AND
                                                    {{' ${alias_tabla.columna_filtrada} '}}
                                                </span>
                                                en la cláusula 'WHERE' de la consulta donde quieras inyectar el filtro
                                            </li>
                                            <li i18n="@@indicaciones7">
                                                Si no has añadido ningúna cláusula WHERE, añádela a
                                                la consulta y haz los joins necesarios,
                                                junto con el filtro en el formato
                                                <span style="color:rgb(0, 62, 119); font-weight: bold">
                                                    {{' ${alias_tabla.columna_filtrada} '}}
                                                </span>
                                            </li>
                                            <li i18n="@@indicaciones8">
                                                Si la tabla por la que filtramos no está en la consulta,
                                                recuerda que debes añadir las cláusulas JOIN necesarias
                                                para poder vicular la tabla del filtro con tu consulta
                                            </li>
                                        </ul>
                                    </ng-template>
                                </p-accordionTab>
                                <p-accordionTab i18n-header="@@examples" header="Ejemplos">
                                    <ng-template pTemplate="content">
                                        <p i18n="@@indicaciones9">Consulta simple</p>
                                        <ul>
                                            <li style="font-weight: bold;">
                                                SELECT c.customername FROM CUSTOMERS c
                                            </li>
                                        </ul>
                                        <p i18n="@@indicaciones10">Consulta con los filtros del informe vinculados</p>
                                        <ul>
                                            <p i18n="@@indicaciones11">
                                                Tenemos un filtro en el informe para el campo 'city' de la tabla CUSTOMERS
                                            </p>
                                            <li i18n="@@indicaciones12"> Consulta sin filtros vinculados</li>
                                            <ul>
                                                <li style="font-weight: bold;">
                                                    SELECT c.customername FROM CUSTOMERS c WHERE c.customername IN ('Julia', 'John')
                                                </li>
                                            </ul>
                                            <li i18n="@@indicaciones13"> Consulta con filtros vinculados</li>
                                            <ul>
                                                <li style=" font-weight: bold">
                                                    SELECT c.customername
                                                    FROM CUSTOMERS c
                                                    WHERE c.customername IN ('Julia', 'john') AND {{'${c.city}'}}
                                                </li>
                                            </ul>
                                        </ul>
                                        <ul>
                                            <p i18n="@@indicaciones14">
                                                Tenemos un filtro en el informe para el campo 'office_id' de la tabla OFFICES
                                            </p>
                                            <li i18n="@@indicaciones15"> Consulta sin filtros vinculados</li>
                                            <ul>
                                                <li style=" font-weight: bold;">
                                                    SELECT e.employee_name
                                                    FROM EMPLOYEE e
                                                    WHERE e.employee_name IN ('Julia', 'John')
                                                </li>
                                            </ul>
                                            <li i18n="@@indicaciones16"> Consulta con filtros vinculados</li>
                                            <ul>
                                                <li style="font-weight: bold">
                                                    <p>SELECT e.employee_name FROM EMPLOYEE e</p>
                                                    <p> INNER JOIN OFFICES o ON o.office_id = e.office_id</p>
                                                    <p> WHERE e.employee_name IN ('Julia', 'John') AND {{' ${o.office_id}'}}</p>
                                                </li>
                                            </ul>
                                        </ul>
                                    </ng-template>
                                </p-accordionTab>
                            </p-accordion>

                        </div>
                    </ng-container>
                    <!-- ----------- -->

                    <!-- NO SQL MODE -->
                    <ng-container *ngIf="selectedQueryMode!='SQL'">
                        <div class="col-6 md:col-2 pl-2 pr-2" >
                            <div class="d-flex justify-content-between"  style="min-height: 45px;">
                                <h4 i18n="@@entidadesH4"  i18n-title="@@entidadesTitle" title="Clique sobre un entidad para ver sus atributos.">
                                    Entidades
                                </h4>
                            </div>

                            <!-- EDA MODE -->
                            <ng-container *ngIf="selectedQueryMode=='EDA'">
                                <eda-input [inject]="inputs.findTable"></eda-input>
                                <div class="column-list">
                                    <div class="our-table-box" *ngFor="let table of tablesToShow" (click)="loadColumns(table)"
                                        [className]="table.table_name === userSelectedTable ? 'selected-table-class' : 'our-table-box'"
                                        (mouseover)="showDescription(table)" (mouseout)="description = ''">
                                        <span class="text-left" title="{{table.description.default}}">
                                            {{table.display_name.default}}
                                        </span>
                                    </div>
                                </div>
                            </ng-container>
                            <!-- ----------- -->

                            <!-- EDA JOINS TREE MODE -->
                            <ng-container *ngIf="selectedQueryMode=='EDA2'">
                                <ng-container *ngIf="currentQuery.length > 0">
                                    <p-tree selectionMode="single"
                                        [value]="tableNodes"
                                        [loading]="loadingNodes"
                                        (onNodeExpand)="tableNodeExpand($event)"
                                        (onNodeSelect)="tableNodeSelect($event)">

                                        <ng-template let-node pTemplate="child">
                                            <span [ngClass]="checkNodeSelected(node) ? 'font-weight-bold' : ''"> {{node.label}} </span>
                                            <!-- <span *ngIf="!checkNodeSelected(node)"> {{node.label}} </span> -->
                                            <!-- <ng-container *ngIf="checkNodeSelected(node)"></ng-container> -->
                                        </ng-template>
                                        <ng-template let-node pTemplate="default">
                                            <b>{{node.label}}</b>
                                        </ng-template>

                                    </p-tree>
                                </ng-container>

                                <ng-container *ngIf="currentQuery.length === 0">
                                    <eda-input [inject]="inputs.findTable"></eda-input>
                                    <div class="column-list">
                                        <div class="our-table-box" *ngFor="let table of tablesToShow" (click)="loadColumns(table)"
                                            [className]="table.table_name === userSelectedTable ? 'selected-table-class' : 'our-table-box'"
                                            (mouseover)="showDescription(table)" (mouseout)="description = ''">
                                            <span class="text-left" title="{{table.description.default}}">
                                                {{table.display_name.default}}
                                            </span>
                                        </div>
                                    </div>
                                </ng-container>
                            </ng-container>
                            <!-- ----------- -->
                        </div>

                        <div class="col-6 md:col-2 pl-2">
                            <div class="d-flex justify-content-between"  style="min-height: 45px;">
                                <h4 *ngIf="!userSelectedTable" i18n="@@atributosH4"  i18n-title="@@atributsTitle" title="Atributos de una entidad. Arrastre los atrubutos a la selección o los filtros para consultarlos. Haciendo click sobre el atributo se accede a sus propiedaes">
                                    Atributos
                                </h4>
                                <h5 *ngIf="userSelectedTable" i18n-title="@@atributsTitle" title="Clique sobre un entidad para ver sus atributos." >
                                    <span i18n="@@atributosH4">Atributos de:</span>
                                    <span class="d-block font-weight-bold" i18n="@@atributosH4interpolation" i18n-title="@@atributsTitle">{{getNiceTableName(userSelectedTable)}}</span>
                                </h5>

                            </div>
                            <div>
                            <eda-input [inject]="inputs.findColumn"></eda-input>
                            </div>
                            <div class="column-list" cdkDropList #columnsList="cdkDropList" [cdkDropListData]="columns"
                                [cdkDropListConnectedTo]="[selectList, filterList]" (cdkDropListDropped)="drop($event)"
                                [cdkDropListEnterPredicate]="isAllowed" >
                                <div *ngFor="let column of columns">
                                 <div class="column-box"
                                    *ngIf="['numeric', 'date'].includes(column.column_type)"
                                    (click)="moveItem(column)"
                                    (mouseover)="showDescription(column)"
                                    (mouseout)="description=''"
                                    cdkDrag [cdkDragData]="column"
                                    (cdkDragDropped)="searchRelations(column, $event)"
                                    [ngStyle]="column.hidden && column.hidden == 1 && {'opacity': '0.5'}">
                                        <span *ngIf='column.column_type == "text" ' class="mdi  mdi-alphabetical" style="margin-right:4px;"></span>
                                        <span *ngIf='column.column_type == "date" ' class="mdi mdi-calendar-text" style="margin-right:4px;"></span>
                                        <span *ngIf='column.column_type == "numeric" ' class="mdi mdi-numeric" style="margin-right:4px;"></span>
                                        <span class="text-left" title="{{column.description.default}}" class="eda-col-class-{{column.column_type}}">
                                            {{column.display_name.default}}
                                        </span>
                                    </div>

                                    <div class="column-box"
                                        *ngIf="!['numeric', 'date'].includes(column.column_type)"
                                        (click)="moveItem(column)"
                                        (mouseover)="showDescription(column)"
                                        (mouseout)="description=''"
                                        cdkDrag
                                        (cdkDragDropped)="searchRelations(column, $event)"
                                        [ngStyle]="column.hidden && column.hidden == 1  && {'opacity': '0.5'} " >

                                        <span *ngIf='column.column_type == "text" ' class="mdi  mdi-alphabetical" style="margin-right:4px;"></span>
                                        <span *ngIf='column.column_type == "date" ' class="mdi mdi-calendar-text" style="margin-right:4px;"></span>
                                        <span *ngIf='column.column_type == "numeric" ' class="mdi mdi-numeric" style="margin-right:4px;"></span>
                                        <span class="text-left" title="{{column.description.default}}" class="eda-col-class-{{column.column_type}}">
                                            {{column.display_name.default}}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-12 md:col-8 pl-2">
                            <h4 i18n="@@seleccionH4" i18n-title="@@seleccionTitle" title="Para lanzar una consulta. Seleccione los atributos que desea ver, Clique sobre ellos para configurarlos y ejecute la consulta. Siempre podrá volver a esta vista.">
                                Mostrar los siguientes atributos:
                            </h4>
                            <hr class="mb-0">
                            <div class="select-list" cdkDropList cdkDropListOrientation="horizontal"
                                #selectList="cdkDropList" [cdkDropListData]="currentQuery"
                                [cdkDropListConnectedTo]="[columnsList, filterList]" (cdkDropListDropped)="drop($event)" >
                                <p *ngIf="currentQuery.length < 1" class="fieldsInfo">{{draggFields}}</p>
                                <div *ngFor="let item of currentQuery"
                                class="p-2 select-box text-center"
                                (click)="openColumnDialog(item)"
                                (mouseover)="showDescription(item)"
                                (mouseout)="description = ''"
                                cdkDrag
                                [cdkDragData]="column">
                                <div class="col">

                                  <span class="fa fa-close pull-right" style="z-index: 9999;" (click)="removeColumn( item, 'select' )"></span>
                                  <span *ngIf='item.column_type == "text" ' class="mdi mdi-alphabetical" style="margin-right:4px;"></span>
                                  <span *ngIf='item.column_type == "date" ' class="mdi mdi-calendar-text" style="margin-right:4px;"></span>
                                  <span *ngIf='item.column_type == "numeric" ' class="mdi mdi-numeric" style="margin-right:4px;"></span>


                                  <span class="text-center eda-col-class-{{item.column_type}}" title="{{item.description.default}}"  >
                                    {{item.display_name.default}}
                                  </span>
                                </div>

                            </div>
                            </div>

                            <h4 class="mt-4" i18n="@@filtrosH4">
                                Filtrar los resultados por:
                            </h4>
                            <hr class="mb-0">
                            <div class="filter-list" cdkDropList cdkDropListOrientation="horizontal"
                                #filterList="cdkDropList" [cdkDropListData]="filtredColumns"
                                [cdkDropListConnectedTo]="[columnsList, selectList]" (cdkDropListDropped)="drop($event)"
                                >
                                <p *ngIf="filtredColumns.length < 1" class="fieldsInfo">{{draggFilters}}</p>
                                <div class="p-2 select-box text-center" *ngFor="let item of filtredColumns"
                                    (click)="openColumnDialog(item, true)" (mouseover)="showDescription(item)"
                                    (mouseout)="description = ''" cdkDrag [cdkDragData]="column" >
                                    <div class="col">
                                        <span class="close-thin pointer" (click)="removeColumn( item, 'filter' )"></span>
                                        <span *ngIf='item.column_type == "text" ' class="mdi  mdi-alphabetical" style="margin-right:4px;"></span>
                                        <span *ngIf='item.column_type == "date" ' class="mdi mdi-calendar-text" style="margin-right:4px;"></span>
                                        <span *ngIf='item.column_type == "numeric" ' class="mdi mdi-numeric" style="margin-right:4px;"></span>
                                        <span  class=" text-center eda-col-class-{{item.column_type}}" title="{{item.description.default}}"  >
                                            {{item.display_name.default}}
                                        </span>
                                    </div>
                                </div>

                            </div>

                            <div class="grid">
                                <div class="col-3 md:col-12 infoFiltres">
                                    <span i18n="@@topQueryH4">
                                        Mostrar Top: &nbsp;
                                        <p-inputNumber [(ngModel)]="queryLimit" (onInput)="onTopChange()"></p-inputNumber>
                                    </span>
                                </div>
                                <div class="col-4 md:col-12 flex infoJoin" >

                                    <span i18n="@@joinTypeH4">
                                        Tipo de intersección: &nbsp;
                                    </span>
                                    <p-selectButton [options]="joinTypeOptions" [(ngModel)]="joinType"  (onChange)="onJoinTypeChange()"  optionLabel="icon" optionValue="joinType" >
                                        <ng-template let-item>
                                            <i [class]="item.icon"></i>

                                        </ng-template>
                                    </p-selectButton>
                                </div>

                                <div class="col-2 col-offset-3 md:col-12 infoFiltres d-flex justify-content-end">
                                    <button pButton (click)="onWhatIfDialog()" icon="pi pi-question-circle" class="p-button-info p-button-outlined button-whatif ml-2" label="What IF"></button>
                                </div>

                                <div class="col-12 md:col-12 info-query" *ngIf="currentQuery.length !== 0">
                                    <div #myQuery>
                                        <span i18n="@@consultaH4" class="span-title">
                                            Mi consulta
                                        </span>

                                        <span>
                                            <i class="pi pi-info-circle" style="cursor: pointer; margin-top: -5px;"
                                                (click)="getQuery($event)" [pTooltip]="ptooltipViewQuery"></i>
                                        </span>
                                    </div>

                                    <hr>

                                    <!-- QUERY FROM SERVER -->
                                    <p-overlayPanel #op [appendTo]="'body'">
                                        <ng-template pTemplate>
                                            <div>
                                                <h6 i18n="@@yourQuerySQL">Mi consulta SQL</h6>
                                                <div *ngIf="display_v.minispinnerSQL"
                                                    style="text-align: center; margin: solid 1px grey;">

                                                    <p-progressSpinner *ngIf="display_v.minispinnerSQL"
                                                        [style]="{width: '4vw', height: '4vh'}" strokeWidth="5" class=""
                                                        fill="#EEEEEE" animationDuration=".5s">
                                                    </p-progressSpinner>

                                                </div>

                                                <textarea *ngIf="!display_v.minispinnerSQL" id="query-area" class="sqlInput"
                                                    rows="10" cols="100" pInputTextarea autoResize="autoResize"
                                                    [(ngModel)]="queryFromServer"></textarea>
                                            </div>
                                            <button type="button" pButton icon="fa fa-database" (click)="migrateQuery()"
                                                class="p-button-success ml-2" i18n-label="@@openSqlMode"
                                                label="Abrir en modo SQL" [pTooltip]="ptooltipSQLmode">
                                            </button>
                                        </ng-template>
                                    </p-overlayPanel>


                                    <div class="grid">

                                        <div class="col-12 md:col-6 pl-2">
                                            <h5 i18n="@@resumenAtrH6">
                                                Resumen de atributos
                                            </h5>

                                            <div *ngFor="let column of currentQuery" class="d-flex align-items-center">

                                                <strong class="d-flex align-items-center" [innerHTML]="getColumnJoins(column)"></strong>

                                                <span class="d-flex align-items-center">
                                                    <strong> {{ getNiceTableName(column.table_id) }} </strong>
                                                    <i class="pi pi-angle-right"></i>
                                                    {{column.display_name.default}}
                                                </span>

                                                <ng-container *ngFor="let aggregation of column.aggregation_type">
                                                    <span *ngIf="aggregation.selected && aggregation.display_name !== 'no'" class="d-flex align-items-center">
                                                        ( {{aggregation.display_name}} )
                                                    </span>
                                                </ng-container>

                                            </div>
                                        </div>


                                        <div class="col-12 md:col-6 pl-2">
                                            <h5 i18n="@@resumenFiltrosPanelH6">
                                                Resumen de filtros del panel
                                            </h5>



                                            <div *ngFor="let filter of selectedFilters" class="d-flex align-items-center">
                                                <strong class="d-flex align-items-center" [innerHTML]="getFilterJoins(filter)"></strong>

                                                <span class="d-flex align-items-center" [innerHTML]="getDisplayFilterStr(filter)"></span>
                                            </div>
                                        </div>

                                        <div class="col-12 md:col-6 pl-2">
                                            <h5 i18n="@@resumenFiltrosInformeH6">
                                                Resumen de filtros del informe
                                            </h5>

                                            <div *ngFor="let filter of globalFilters" class="d-flex align-items-center">
                                                <strong class="d-flex align-items-center" [innerHTML]="getFilterJoins(filter)"></strong>

                                                <span class="d-flex align-items-center" [innerHTML]="getDisplayFilterStr(filter)"></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </ng-container>
                </div>


                <!-- <div *ngIf="!modeSQL" class="grid"></div> -->
                <!-- <div *ngIf="modeSQL" class="grid"></div> -->

            </p-tabPanel>



            <p-tabPanel i18n-header="@@vistaPrevia" header="VISTA PREVIA" [disabled]="display_v.disablePreview || currentQuery.length === 0">
                <div class="grid p-0 h-100">
                    <div class="col-8 p-1 component" style="background-color: var(--panel-color);">


                        <div class="container">
                            <div class="row panel-chart-style">
                                <panel-chart #panelChartComponentPreview [props]="panelChartConfig"
                                    style="height: 100%; width: 100%; display:block">
                                </panel-chart>
                            </div>
                        </div>
                        <div class="container">
                            <div class="row">
                                <drag-drop *ngIf="graphicType==='crosstable'  && dragAndDropAvailable" [axes]="axes" (newAxes)="newAxesOrdering($event)"></drag-drop>
                            </div>
                        </div>

                    </div>


                    <div class="col-4 p-offset-1 p-1 edaChartSelector">
                        <div class="grid p-0">
                            <div class="col-12">
                                <form [formGroup]="chartForm">
                                    <p-dropdown id="chartSelector" [style]="{'width':'100%'}"
                                        [options]="chartTypes"
                                        formControlName="chart"
                                        (onChange)="changeChartTypeCheck(chartForm.value.chart.value, chartForm.value.chart.subValue, getChartStyles(chartForm.value.chart.value))
                                        "optionLabel="label"
                                        [autoDisplayFirst]="false">
        
                                        <ng-template pTemplate="selectedItem">
                                            <div class="chart-item chart-item-value" *ngIf="chartForm.value.chart">
                                                <i *ngIf="!!chartForm.value.chart.ngIf"
                                                    class="{{chartForm.value.chart.icon}}"
                                                    style="color: #eeac57!important;vertical-align:middle;">
                                                </i>
                                                <span style="vertical-align:middle; margin-left: .5em">
                                                    {{chartForm.value.chart.label}}
                                                </span>
        
                                            </div>
                                        </ng-template>
        
                                        <ng-template let-chart pTemplate="item">
                                            <div class="d-flex align-items-center" style="position: relative;height: 25px;"
                                                [attr.title]="chart.tooManyData ? getTooManyDataDescription() : (chart.ngIf) ? getOptionDescription(chart.subValue) : '' ">
                                                <span class="material-icons"
                                                    [ngClass]="{'orange-alert': chart.ngIf, 'grey-alert': chart.tooManyData}">
                                                    {{getOptionIcon(chart.subValue)}}
                                                </span>
        
        
                                                <span class="ml-2 "
                                                    [ngClass]="{'texto-rallado-alert': chart.ngIf  || chart.tooManyData}">
                                                    {{chart.label}}
                                                </span>
        
                                                <span i18n="@@tooManyValues" *ngIf='chart.tooManyData' class="edaTooManyData"> -
                                                    Demasiados valores</span>
        
                                                <span i18n="@@notAvaliable" *ngIf='chart.ngIf' class="edaTooManyData"> - No
                                                    Disponible</span>
                                            </div>
                                        </ng-template>
        
                                    </p-dropdown>
        
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

            </p-tabPanel>

        </p-tabView>


    </div>

    <p-footer class="footer" appendTo="body" style="z-index: 10000;">
        <div class="p-dialog-buttonpanel p-widget-content p-helper-clearfix text-right">
            <button type="button" pButton (click)="runManualQuery()" [disabled]="disableRunQuery()"
                icon="fa fa-flask" class="p-button-success ml-2" i18n-label="@@ejecutarBtn" label="Ejecutar">
            </button>

            <button type="submit" pButton (click)="savePanel()" [disabled]="display_v.btnSave" icon="fa fa-check"
                class="p-button ml-2" i18n-label="@@guardarBtn" label="Confirmar" id="eda_blak_panel_confirmar">
            </button>

            <button type="button" pButton (click)="closeEditarConsulta()" icon="fa fa-times"
                class="p-button-danger ml-2" i18n-label="@@cancelarBtn" label="Cancelar" id="eda_blak_panel_cancelar">
            </button>
        </div>
    </p-footer>

</eda-page-dialog>

<app-column-dialog *ngIf="configController" [controller]="configController"></app-column-dialog>

<app-filter-dialog *ngIf="filterController" [controller]="filterController"></app-filter-dialog>

<app-chart-dialog *ngIf="chartController" [controller]="chartController"></app-chart-dialog>

<app-mapedit-dialog *ngIf="mapController" [controller]="mapController"></app-mapedit-dialog>

<app-mapcoordedit-dialog *ngIf="mapCoordController" [controller]="mapCoordController"></app-mapcoordedit-dialog>

<app-kpi-dialog *ngIf="kpiController" [controller]="kpiController"></app-kpi-dialog>

<app-dynamicText-dialog *ngIf="dynamicTextController" [controller]="dynamicTextController"></app-dynamicText-dialog>

<app-table-dialog *ngIf="tableController" [controller]="tableController"></app-table-dialog>

<app-alert-dialog *ngIf="alertController" [controller]="alertController"></app-alert-dialog>

<app-cumsum-alert-dialog *ngIf="cumsumAlertController" [controller]="cumsumAlertController"></app-cumsum-alert-dialog>

<app-sankey-dialog *ngIf="sankeyController" [controller]="sankeyController"></app-sankey-dialog>

<app-bubblechart-dialog *ngIf="bubblechartController" [controller]="bubblechartController"></app-bubblechart-dialog>

<app-treeMap-dialog *ngIf="treeMapController" [controller]="treeMapController"></app-treeMap-dialog>

<app-tree-table-dialog  *ngIf="treeTableController" [controller]="treeTableController"></app-tree-table-dialog>

<app-funnel-dialog *ngIf="funnelController" [controller]="funnelController"></app-funnel-dialog>

<app-scatterPlot-dialog *ngIf="scatterPlotController" [controller]="scatterPlotController"></app-scatterPlot-dialog>

<link-dashboards-dialog *ngIf="linkDashboardController" [controller]="linkDashboardController"></link-dashboards-dialog>

<knob-dialog *ngIf="knobController" [controller]="knobController"> </knob-dialog>

<sunburst-dialog *ngIf="sunburstController" [controller]="sunburstController"> </sunburst-dialog>

<eda-context-menu [inject]="contextMenu"></eda-context-menu>

<app-whatif-dialog *ngIf="display_v.whatIf_dialog" [(currentQuery)]="currentQuery" (close)="onCloseWhatIfDialog()"></app-whatif-dialog>
